<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree-table</title>
    <link rel="stylesheet" href="../../../statics/layui/css/layui.css">
    <link rel="stylesheet" href="../../../statics/css/main.css" media="all"/>
    <link rel="stylesheet" href="../../../statics/layui/font/font.css" media="all"/>
    <script type="text/javascript" src="../../../statics/layui/layui.js"></script>
    <script type="text/javascript" src="../../../statics/layui/lay/modules/jquery.js" charset="utf-8"></script>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a>系统管理</a>
        <a><cite>菜单管理</cite></a>
    </span>
</div>

<div class="layui-row">
    <div class="layui-col-xs3">
        <span>&nbsp;</span>
        <table class="layui-table layui-form" id="docList" lay-filter="docList"></table>
        <script type="text/html" id="docOptbar">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="docEdit">编辑</a>
        </script>
        <script type="text/html" id="docOpt">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="btn-add-doc">新建文档</button>
            </div>
        </script>
    </div>
    <div class="layui-col-xs9">
        <span class="filePath" style="color:#428bca;">&nbsp;</span>
        <table class="layui-table layui-form" id="fileList" lay-filter="fileList"></table>
        <script type="text/html" id="fileOptbar">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="dirEdit">编辑</a>
        </script>
        <script type="text/html" id="fileOpt">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="btn-add-att">上传</button>
                <button class="layui-btn layui-btn-sm" lay-event="btn-add-dir">新建文件夹</button>
            </div>
        </script>
    </div>
  </div>


<script src="/static/js/main.js"></script>
<script>
    var ysb = {};
    var configureCom = {};

    
    

    layui.use(['table', 'treetable', 'configureCom', 'sessionFun', 'configure'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var sessionFun = layui.sessionFun;
        var configure = layui.configure;
        configureCom = layui.configureCom;
        var token = localStorage.getToken;

        var currentDoc = {
            docId :null,
            dirId :null
        };


        /**
         * [docCols description]
         * @type {Array}
         */
        var docCols= [[
            {type: 'checkbox', fixed: 'left'},
            { field: 'name', title: '名称',  templet: function (d) {
                    var icon =d.isTempl?'layui-icon-template':'layui-icon-app';
                    return '<i class="layui-icon ' + icon + '"></i> &nbsp;' + d.name;
                }
            },
            {field: 'code', title: '编码'},
            {templet: '#docOptbar', align: 'center', title: '操作'}
        ]];
        configureCom.tableRender(baseApi + '/km/query/doc/list', {}, docCols,'docList',100000,'full-100','docOpt');
        table.on('row(docList)', function (obj) {
            var data = obj.data;
            currentDoc = { 
                docId : data.id,
                dirId :data.dirId
            };
            reloadFileList(data.dirId);
            breadcrumb.empty();
            breadcrumb.append(data.dirId, data.name);
        });
        
        table.on('toolbar(docList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'btn-add-doc':
                    docEdit(null);
                    break;
                case '':
                    break;
            }
        });

        table.on('tool(docList)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'docEdit') {
                docEdit(data);
            } 
        });


        /**
         * [fileCols description]
         * @type {Array}
         */
        var fileCols= [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'name', title: '文件名', templet: function (d) {
                    return '<img style="width:20px;height:20px;" src="../../../static/images/'+d.type+'.svg"></img> &nbsp;' + d.name;
                }
            },
            {field: 'code', title: '编码'},
            {field: 'createTime', title: '修改日期'},
            {templet: '#fileOptbar', width: 200, align: 'center', title: '操作'}
        ]];
        configureCom.tableRender(baseApi + '/km/query/file/list', {'parentId':0}, fileCols,'fileList',100000,'full-100','fileOpt');

        table.on('row(fileList)', function (obj) {
            var data = obj.data;
            if(data.type=='dir'){
                currentDoc.dirId = data.id;
                breadcrumb.removeNextAll(data.parnetId);
                breadcrumb.append(data.id, ' > '+data.name);
                reloadFileList(data.id);
            }else{
                alert("您点击的是个文件！");
            }
        });


        table.on('toolbar(fileList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'btn-add-dir':
                    dirEdit({parentId:currentDoc.dirId});
                    break;
                case 'btn-add-att':

                    break;
            }
        });

        table.on('tool(fileList)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'dirEdit') {
                dirEdit(data);
            } 
        });

        /**
         * 文档 新建/编辑
         * @param  {[type]} id [description]
         * @return {[type]}    [description]
         */
        function docEdit(data){
            var title = '添加文档';
            var url = '/templates/doc/editDoc.html'
            if(data && data.id){
                title = '编辑文档';
                url += "?id="+data.id
                        +"&name="+encodeURI(data.name)
                        +"&code="+encodeURI(data.code)
                        +"&isTempl="+data.isTempl;
            }
            configureCom.editItem(title, url, baseApi + '/km/doc/save').then(function(res){
                if(res.code==0){
                    top.layer.msg('保存成功！');
                    reloadDocList();
                }
            });
        }

        /**
         * 文件夹 新建/编辑
         * @param  {[type]} id       [description]
         * @param  {[type]} parentId [description]
         * @return {[type]}          [description]
         */
        function dirEdit(data){
            var title = '添加文件夹';
            var url = '/templates/doc/editDir.html?parentId='+data.parentId;
            if(data && data.id){
                title = '编辑文件夹';
                url += '&id='+data.id
                        +'&name='+encodeURI(data.name)
                        +'&code='+encodeURI(data.code)
            }
            configureCom.editItem(title, url, baseApi + '/km/dir/save').then(function(res){
                if(res.code==0){
                    top.layer.msg('保存成功！');
                    reloadFileList(data.parentId);
                }
            });
        }


        function reloadFileList(parentId){
            configureCom.tableReloadPanel(true, {'parentId':parentId}, baseApi + '/km/query/file/list', 'fileList')
        }

        function reloadDocList(){
            configureCom.tableReloadPanel(true, null, baseApi + '/km/query/doc/list', 'docList')
        }
        /**
         * 面包屑操作
         * @return {[type]} [description]
         */
        var breadcrumb = {
            empty : function(){
                $('.filePath').empty();
            },
            removeNextAll: function(clazz){
                $('.'+clazz).nextAll().remove();
            },
            append: function(id,name){
                var html = '<a class="'+id+'" style="color:#428bca;" href="#">'+name+'</a>'
                $('.filePath').append(html);
                $('.'+id).click(function() {
                    breadcrumb.removeNextAll(id);
                    configureCom.tableReloadPanel(true, {'parentId':id}, baseApi + '/km/query/file/list', 'fileList')
                });
            },
        }
        
    });
</script>
</body>
</html>